<template>
  <div class="auth-wrapper d-flex align-center justify-center pa-4">
    <VCard class="auth-card pa-4 pt-7" max-width="448">
      <VCardItem class="justify-center">
        <template #prepend>
          <div class="d-flex">
            <div class="d-flex text-primary" v-html="logo" />
          </div>
        </template>

        <VCardTitle class="text-2xl font-weight-bold"> 房地产项目设计流程管理系统 </VCardTitle>
      </VCardItem>

      <VCardText class="pt-2">
        <h5 class="text-h5 mb-1">欢迎来到房地产项目设计流程管理系统! 👋🏻</h5>
        <p class="mb-0">请登录你的账户后开始吧</p>
      </VCardText>

      <VCardText>
        <VForm @submit.prevent="$router.push('/')">
          <VRow>
            <!-- 邮箱 -->
            <VCol cols="12">
              <VTextField
                v-model="loginForm.userName"
                autofocus
                placeholder="请输入用户名"
                label="用户名"
                
              />
            </VCol>
            <!-- 密码 -->
            <VCol cols="12">
              <VTextField
                v-model="loginForm.userPassword"
                label="密码"
                placeholder="············"
                :type="isPasswordVisible ? 'text' : 'password'"
                :append-inner-icon="isPasswordVisible ? 'bx-hide' : 'bx-show'"
                @click:append-inner="isPasswordVisible = !isPasswordVisible"
              />
            </VCol>

            <!-- 验证码 -->
            <VCol cols="12">
              <VRow>
                <VCol cols="12" md="8">
                  <VTextField
                    v-model="loginForm.code"
                    autofocus
                    placeholder="xxxx"
                    label="验证码"
                    type="code"
                  />
                </VCol>
                <VCol cols="12" md="4">
                  <div
                    style="
                      height: 3.5rem;
                      float: right;
                      border: solid 1px #000000;
                      border-radius: 10px;
                      overflow: hidden;
                    "
                  >
                    <img :src="codeUrl" @click="getCode" id="codeImg" />
                  </div>
                </VCol>
              </VRow>
            </VCol>

            <VCol cols="12">
              <!-- remember me checkbox -->
              <div
                class="d-flex align-center justify-space-between flex-wrap mt-1 mb-4"
              >
                <VCheckbox v-model="loginForm.remember" label="记住我" />

                <RouterLink
                  class="text-primary ms-2 mb-1"
                  to="javascript:void(0)"
                >
                  忘记密码?
                </RouterLink>
              </div>

              <!-- login button -->
              <VBtn block type="submit" @click="login"> 登录 </VBtn>
            </VCol>

            <!-- create account -->
            <VCol cols="12" class="text-center text-base">
              <span>没有账户?</span>
              <RouterLink class="text-primary ms-2" to="/register">
                创建新账户
              </RouterLink>
            </VCol>

            <VCol cols="12" class="d-flex align-center">
              <VDivider />
              <span class="mx-4">or</span>
              <VDivider />
            </VCol>

            <!-- auth providers -->
            <VCol cols="12" class="text-center">
              <AuthProvider />
            </VCol>
          </VRow>
        </VForm>
      </VCardText>
    </VCard>
  </div>
</template>
<script setup lang="ts">
import AuthProvider from "@/views/pages/authentication/AuthProvider.vue";
import logo from "@images/logo.svg?raw";
import { Message } from "@arco-design/web-vue";

import useLoading from '@/hooks/loading';
import { setToken } from '@/utils/auth';
import { useUserStore } from '@/store';
import router from "@/router";
import type { LoginData } from '@/api/user';
import instance from "@/utils/request";
const { loading, setLoading } = useLoading();
const userStore = useUserStore();
const codeUrl = "http://localhost:3000/api/user/getVCode";
const isPasswordVisible = ref(false);
const getCode = async () => {
  try {
    const img = document.getElementById("codeImg");
    img.src=codeUrl+"?"+new Date().getTime();
  } catch (err) {
    console.log(err)
  }
}
const loginForm = reactive({
  userName: "",
  userPassword: "",
  remember: false,
  code: "",
});
const login = async () => {
  // 防止重复提交
  if (loading.value) return;
  // 表单校验
  if (loginForm.userName === '') {
    Message.warning('用户名不能为空,请输入用户名')
    return
  }
  if (loginForm.userPassword === '') {
    Message.warning('密码不能为空,请输入密码')
    return
  }
  if (loginForm.code === '') {
    Message.warning('验证码不能为空,请输入验证码')
    return
  }
  // 登录
  setLoading(true);
  try{
      const res = await userStore.login(loginForm as LoginData);
      // 登录成功 状态码为200
      if(res.data.code === 200)
      {
        // 提交表单
        // 设置Token
        setToken(res.data.data.HREtoken.tokenValue);
        await router.push('/dashboard');
        // 设置用户信息
        userStore.setInfo(res.data.data.userDTO);
        //调用监控程序
        // 判断是否为员工
        if (userStore.userId && userStore.userId.startsWith('S')) {
        // 调用监控程序
        const res2 = await instance.post('/screenshot/startTask?userId=' + userStore.userId);
        console.log(res2)
        }
        
        Message.success(res.data.message)
      }else {
        Message.error(res.data.message)
        //刷新表单
        loginForm.userName = "";
        loginForm.userPassword = "";
        loginForm.code = "";
        setLoading(false);
        // 刷新验证码
        await getCode();
      }
  }catch (err) {
      Message.error(err.message);
    } finally {
      setLoading(false);
    }
      
};

</script>

<style lang="scss">
@use "@core/scss/template/pages/page-auth.scss";
</style>
